/**
 * ECharts-GL 图表示例合集
 * 提供各种3D图表的示例配置
 */

import * as echarts from 'echarts';
import 'echarts-gl';

/**
 * 创建3D柱状图示例
 * 使用官方示例配置
 */
export const createBar3DExample = (dom: HTMLElement, theme?: string) => {
    try {
        console.log('创建3D柱状图示例');

        // 创建图表实例
        const chart = echarts.init(dom, theme);

        const option = {
            tooltip: {},
            visualMap: {
                max: 20,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
                        '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            xAxis3D: {
                type: 'category',
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis3D: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            zAxis3D: {
                type: 'value'
            },
            grid3D: {
                boxWidth: 200,
                boxDepth: 80,
                viewControl: {
                    // 调整视角
                    beta: 30
                },
                light: {
                    main: {
                        intensity: 1.2,
                        shadow: true
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            series: [{
                type: 'bar3D',
                data: [
                    // [x, y, z] - x、y 是类目，z是数值
                    [0, 0, 5], [0, 1, 3], [0, 2, 8], [0, 3, 9], [0, 4, 10], [0, 5, 12], [0, 6, 15],
                    [1, 0, 8], [1, 1, 5], [1, 2, 10], [1, 3, 13], [1, 4, 15], [1, 5, 10], [1, 6, 18],
                    [2, 0, 12], [2, 1, 8], [2, 2, 15], [2, 3, 18], [2, 4, 20], [2, 5, 15], [2, 6, 16],
                    [3, 0, 6], [3, 1, 3], [3, 2, 10], [3, 3, 12], [3, 4, 15], [3, 5, 8], [3, 6, 10],
                    [4, 0, 8], [4, 1, 5], [4, 2, 10], [4, 3, 12], [4, 4, 15], [4, 5, 8], [4, 6, 9],
                    [5, 0, 9], [5, 1, 6], [5, 2, 13], [5, 3, 15], [5, 4, 18], [5, 5, 10], [5, 6, 11]
                ],
                shading: 'lambert',
                label: {
                    show: false,
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        show: true
                    },
                    itemStyle: {
                        color: '#f54'
                    }
                }
            }]
        };

        chart.setOption(option);
        console.log('3D柱状图示例创建成功');

        return chart;
    } catch (error) {
        console.error('创建3D柱状图示例失败:', error);
        return null;
    }
};

/**
 * 创建3D散点图示例
 */
export const createScatter3DExample = (dom: HTMLElement, theme?: string) => {
    try {
        console.log('创建3D散点图示例');

        // 创建图表实例
        const chart = echarts.init(dom, theme);

        // 生成一些随机数据
        const data = [];
        for (let i = 0; i < 500; i++) {
            const x = Math.random() * 10 - 5;
            const y = Math.random() * 10 - 5;
            const z = Math.random() * 10 - 5;
            data.push([x, y, z]);
        }

        const option = {
            tooltip: {},
            grid3D: {
                viewControl: {
                    // 调整视角
                    beta: 30
                }
            },
            xAxis3D: {},
            yAxis3D: {},
            zAxis3D: {},
            series: [{
                type: 'scatter3D',
                data: data,
                symbolSize: 5,
                itemStyle: {
                    color: '#4e79a7'
                }
            }]
        };

        chart.setOption(option);
        console.log('3D散点图示例创建成功');

        return chart;
    } catch (error) {
        console.error('创建3D散点图示例失败:', error);
        return null;
    }
};

/**
 * 创建3D折线图示例
 */
export const createLine3DExample = (dom: HTMLElement, theme?: string) => {
    try {
        console.log('创建3D折线图示例');

        // 创建图表实例
        const chart = echarts.init(dom, theme);

        // 生成一些随机数据
        const data = [];
        for (let i = 0; i < 100; i++) {
            const t = i / 10;
            const x = Math.cos(t);
            const y = Math.sin(t);
            const z = t;
            data.push([x, y, z]);
        }

        const option = {
            tooltip: {},
            grid3D: {
                viewControl: {
                    // 调整视角
                    beta: 30
                }
            },
            xAxis3D: {},
            yAxis3D: {},
            zAxis3D: {},
            series: [{
                type: 'line3D',
                data: data,
                lineStyle: {
                    width: 4,
                    color: '#f54'
                }
            }]
        };

        chart.setOption(option);
        console.log('3D折线图示例创建成功');

        return chart;
    } catch (error) {
        console.error('创建3D折线图示例失败:', error);
        return null;
    }
};

/**
 * 获取匹配图表类型的示例函数
 */
export const getExampleCreator = (chartType: string) => {
    switch (chartType) {
        case 'bar3D':
            return createBar3DExample;
        case 'scatter3D':
            return createScatter3DExample;
        case 'line3D':
            return createLine3DExample;
        default:
            return null;
    }
}; 